<!--
 * @Author: hua
 * @Date: 2020-07-21 15:21:54
 * @description: 
 * @LastEditors: hua
 * @LastEditTime: 2020-08-10 15:06:40
--> 
<template>
  <!--内容-->
  <div class="container">
    <HeaderBindEquipment />
    <h4>{{$t("ChooseProductionPatch")}}：{{productionBatch.batchName}}</h4>
    <h4>{{$t("StepTwoEquipmentBIND")}}</h4>
    <div style="margin-bottom:20px;color:red">
      <i class="el-icon-warning" style="margin-right:20px" />
      {{$t("makeSureClose")}}
    </div>
    <el-form :label-position="'left'" :model="reqData" ref="Form" label-width="110px" class="form">
      <el-form-item
        :label="$t('imei')"
        prop="simcardImei"
        :rules="[
            { required: true, message: `${$t('imei')} ${$t('isRequired')}`}
          ]"
      >
        <el-input id="inputImei" v-model.trim="reqData.simcardImei" :placeholder="$t('inputImei')"></el-input>
      </el-form-item>
      <el-form-item
        :label="$t('behindCode')"
        prop="shellQrCode"
        :rules="[
            { required: true, message: `${$t('behindCode')} ${$t('isRequired')}`}
          ]"
      >
        <el-input
          @input="onSubmit"
          id="behindCode"
          v-model.trim="reqData.shellQrCode"
          :placeholder="$t('inputBehindQR')"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item class="reverse">
        <el-button type="primary" @click="onSubmit">{{$t("bind")}}</el-button>
      </el-form-item>-->
    </el-form>
    <!-- loading -->
    <div style="text-align:center;width:100%;" v-if="status === 1">
      <div class="el-icon-loading" style="font-size:60px;"></div>
      <div style="margin-top:10px;">Loading</div>
    </div>
    <!-- success -->
    <div
      v-if="status === 2"
      style="display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;"
    >
      <el-button
        type="success"
        icon="el-icon-check"
        circle
        style="zoom:1.2;height:50px;width:50px;"
      ></el-button>
      <div style="margin-top:20px;">{{$t("bindSuccess")}}</div>
      <div style="margin-top:10px;">{{$t("tipsInfo")}}</div>
      <div style="position:absolute;right:20px;">{{$t("cleanTips")}}</div>
    </div>
    <!-- fail -->
    <div
      v-if="status === 3"
      style="display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;"
    >
      <el-button type="danger" icon="el-icon-close" circle style="zoom:1.2;height:50px;width:50px;"></el-button>
      <div style="margin-top:20px;color:red">{{$t("bindFail")}}</div>
      <div style="position:absolute;right:20px;">{{$t("cleanTips")}}</div>
    </div>
    <div style="display:flex;width:100%;justify-content:space-between;margin-top:20px">
      <el-button type="primary" style="width:150px" @click="goHisotry">{{$t('previous')}}</el-button>
      <el-button type="primary" style="width:150px" @click="handleClean">{{$t('clean')}}</el-button>
      <el-button type="primary" style="width:150px" @click="goHisotry">{{$t('close')}}</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import HeaderBindEquipment from "@/components/HeaderBindEquipment/index";
import { Message, MessageBox } from "element-ui";
import { isvalidUsername } from "@/utils/validate";
import { bindShellQrCode, sendCommand } from "@/api/lock";
export default {
  data() {
    return {
      reqData: {
        appUserId: "",
        shellQrCode: "",
        simcardImei: "",
      },
      status: 0, //0,1,2,3
    };
  },
  computed: {
    ...mapGetters(["userInfo", "productionBatch", "equipmentInfo"]),
  },
  components: { HeaderBindEquipment },
  mounted() {
    let that = this;
    window.inputLock = true;
    window.inputLockTimeOut = null;
    Object.defineProperty(window.bindInfo, "imei", {
      get: function () {
        console.log("get val");
      },
      set: function (newVal) {
        console.log("set val:" + newVal);
        if (newVal === "") {
          that.reqData.shellQrCode = "";
          that.status = 0;
        }
        that.reqData.simcardImei = newVal.trim();
        setTimeout(() => {
          let behindCode = document.getElementById("behindCode");
          behindCode.focus();
        }, 1000);
      },
    });

    /* let inputelement = document.getElementById("inputImei");
    inputelement.focus(); */
    if (!this.productionBatch.id) {
      MessageBox.confirm(this.$t("productionBatchError"), this.$t("error"), {
        confirmButtonText: this.$t("button.ok"),
        cancelButtonText: this.$t("button.cancel"),
        type: "warning",
      }).then(() => {
        this.$router.push({ name: "chooseProductionPlan" });
      });
      return;
    }
  },
  methods: {
    handleClean() {
      this.reqData.shellQrCode = "";
      this.reqData.simcardImei = "";
    },
    goHisotry() {
      window.history.go(-1);
    },
    onSubmit() {
      console.log(this.reqData.shellQrCode);
      /*  if (this.reqData.shellQrCode.length < 10) {
        return;
      } */
      clearTimeout(window.inputLockTimeOut);
      window.inputLockTimeOut = setTimeout(() => {
        window.inputLock = false;
        console.log(window.inputLock);
        if (!this.productionBatch.id) {
          MessageBox.confirm(
            this.$t("productionBatchError"),
            this.$t("error"),
            {
              confirmButtonText: this.$t("button.ok"),
              cancelButtonText: this.$t("button.cancel"),
              type: "warning",
            }
          ).then(() => {
            this.$router.push({ name: "chooseProductionPlan" });
          });
          return;
        }
        if (!window.inputLock) {
          this.$refs["Form"].validate((valid) => {
            if (valid) {
              this.reqData.appUserId = this.userInfo.id;
              bindShellQrCode(
                this.reqData.appUserId,
                this.reqData.shellQrCode,
                this.reqData.simcardImei,
                this.productionBatch.id
              )
                .then((res) => {
                  //成功后发送sleep
                  sendCommand(
                    this.userInfo.id,
                    "SLEEP",
                    this.reqData.simcardImei
                  )
                    .then((res) => {
                      this.status = 2;
                      Message({
                        message: this.$t("bindSuccess"),
                        type: "success",
                        duration: 5 * 1000,
                      });
                      this.$store.commit("SAVE_EQUIPMENT_INFO", {
                        simcardImei: this.reqData.simcardImei,
                        shellQrCode: this.reqData.shellQrCode,
                      });
                      console.log(this.status);
                    })
                    .catch((error) => {
                      console.log(error);
                      this.status = 3;
                    });
                })
                .catch((error) => {
                  console.log(error);
                  this.status = 3;
                });
            } else {
              console.log("error submit!!");
              return false;
            }
          });
        }
      }, 800);
    },
  },
};
</script>


<style rel="stylesheet/scss" lang="scss" scoped>
.container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px 20px 10px 20px;
  overflow: auto;
}
.form {
  width: 80%;
}
.reverse {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.item {
  line-height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
@media (max-width: 500px) {
  .left_container {
    flex: 65px 0 0;
  }
}
</style>
